<template>
  <div class="task">
    <div class="taskTop">
      <div class="title">行为决策实验平台</div>
      <div class="phase">
        <el-row style="height: 100%">
          <el-col :span="4"></el-col>
          <el-col
              :span="16"
              style="display: flex; align-items: center; height: 100%"
          >
            <span style="margin-right: 50px">第3场</span>
            <span style="margin-right: 50px" >实验阶段：第1阶段</span>
            <span>实验桌号： {{ $store.state.seatID }}号</span>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </div>
<!--      <el-col-->
<!--          :span="8"-->
<!--          style="-->
<!--                  display: flex;-->
<!--                  align-items: center;-->
<!--                  height: 100%;-->
<!--                  justify-content: flex-end;-->
<!--                  font-size: 20px;-->
<!--                "-->
<!--      >当前实验周期剩余时间：<span-->
<!--          style=" font-size: 28px; font-weight: 600; color: #3360ec"-->
<!--      ><a-countdown :value="$store.state.rest_Time" /></span-->
<!--      ></el-col-->
<!--      >-->
    </div>


    <div class="taskMain">
      <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%"></el-col>
        <el-col :span="16" style="height: 100%">
          <div class="mainTask">
            <el-row style="height: 100%;padding-top: 15px">
              <el-col
                  :span="8"
                  style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  font-size: 20px;
                  color: #3360ec;
                  font-weight: 600;
                ">投资任务进度：{{$store.state.currentRound}}/12</el-col>
              <el-col :span="8"
              ><div class="grid-content ep-bg-purple-light"
              /></el-col>
              <el-col
                  :span="8"
                  style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  justify-content: flex-end;
                  font-size: 20px;
                ">当前实验周期剩余时间：<span
                  style="font-size: 28px; font-weight: 600; color: #3360ec"
              ><a-countdown :value="$store.state.rest_Time"/></span
              ></el-col
              >
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="align-content: center ;display: flex;justify-content: center;">
      <img class="img" src="@/assets/break.png" alt="" />
    </div>

    <div class="textStyle">
      稍事休息一下({{coutTime}}S)
    </div>
  </div>
</template>

<script>
import CProgress from './../components/c-progress'

export default {
  name: 'IsShowMarket',
  components: {
    // eslint-disable-next-line
    CProgress
  },

  data() {

    return {
       coutTime : this.$route.query.coutTime,
      IntervalId:0
    }
  },

  mounted() {
    this.coutTime = this.$route.query.coutTime
    // console.log(this.coutTime)
    this.IntervalId =  setInterval(this.countDown, 1000)
  },

  watch: {
    coutTime: function (newVal, oldVal) {
      if (newVal == 0) {   //15秒的倒计时结束
        clearInterval(this.IntervalId)
        this.$router.push({
          name: 'IsShowIncome'
        })

      }
    }
  },

  methods: {
    countDown() {
      let THIS = this
      THIS.coutTime--
      console.log(this.coutTime)
    },
  }
}
</script>

<style lang="scss" scoped>
.task {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  .taskTop {
    width: 100%;
    height: 15%;

    .title {
      width: 100%;
      height: 60%;
      font-size: 58px;
      letter-spacing: 10px;
      font-weight: 700;
      color: aliceblue;
      background-color: #0b45b0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .phase {
      width: 100%;
      height: 40%;
      border: 1px solid rgb(185, 185, 185);
    }

  }

  .img{
    display: table-cell; /*主要是这个属性*/
    vertical-align: middle;
    text-align: center;
    width: auto;
  }
  .textStyle{
    padding: 30px;
    text-align: center;
    font-size: 38px;
    font-weight: 500;
  }
}
</style>